import React, { PureComponent } from 'react';
import { Popover, Form, Radio, Typography, Icon, Divider, Button, Card, Avatar } from 'antd';
import { connect } from 'dva';
import { withRemove } from './index';
import ImageUpload from '@/components/Modular/ImageUpload';
import styles from './index.less';
import GoodsModal from '../GoodsModal';

const { Text } = Typography;

@connect()
@withRemove
class ImgToSpuComponent extends PureComponent {
  constructor(props) {
    super(props);
    const { content = { full: '', imgUrl: '', spuCode: '' } } = props.data;
    const { full = '', imgUrl: src, spuCode } = content;
    this.state = { full, src, goods: {}, visible: false };
    if (spuCode) this.getGoods(spuCode);
  }

  getGoods = spuCode => {
    this.props
      .dispatch({
        type: '$request/get',
        payload: {
          url: '/v1/product/info',
          params: { spuCode },
        },
      })
      .then(res => this.setState({ goods: res }));
  };

  handleImage = url => {
    const { data } = { ...this.props };
    if (!data.content) data.content = {};
    data.content.imgUrl = url;
    this.props.onChange(data);
    this.setState({ src: url });
  };

  handleType = e => {
    const { value } = e.target;
    const { data } = { ...this.props };
    if (!data.content) data.content = {};
    data.full = value;
    data.content.full = value;
    this.props.onChange(data);
    this.setState({ full: value });
  };

  handleGoodsSelection = (skuData, skuCode, spuData) => {
    if (spuData.length > 0) this.setGoods(spuData[0]);
  };

  setGoods = (goods = {}) => {
    const { data } = { ...this.props };
    if (!data.content) data.content = {};
    data.content.spuCode = goods.spuCode;
    this.props.onChange(data);
    this.setState({ goods });
  };

  showGoodsModal = () => this.setState({ visible: true });

  render() {
    const { src, full, goods, visible } = this.state;
    return (
      <Popover
        placement="right"
        trigger="click"
        content={
          <>
            <Form.Item
              label="图片上传"
              className={styles.mb0}
              extra="只能上传 jpg/png 文件，且不超过 500kb"
            >
              <ImageUpload src={src} onChange={this.handleImage} fileSize={0.5} />
            </Form.Item>
            <Form.Item label="展示类型" className={styles.mb0}>
              <Radio.Group value={full} onChange={this.handleType}>
                <Radio value="">两边留白</Radio>
                <Radio value="full">两边铺满</Radio>
              </Radio.Group>
            </Form.Item>
            <Form.Item label="跳转的商品" className={styles.mb0}>
              {goods.spuCode ? (
                <Card
                  hoverable
                  style={{ width: 240 }}
                  actions={[
                    <Icon key="edit" type="edit" onClick={this.showGoodsModal} />,
                    <Icon key="delete" type="delete" onClick={this.setGoods} />,
                  ]}
                >
                  <Card.Meta
                    avatar={<Avatar size={50} src={goods.logoImageUrl} />}
                    title={goods.productSpuName}
                    description={goods.productName}
                  />
                </Card>
              ) : (
                <Button type="primary" onClick={this.showGoodsModal}>
                  选择商品
                </Button>
              )}
              <GoodsModal
                showPay
                mode="single"
                visible={visible}
                expanded={false}
                onSuccess={this.handleGoodsSelection}
                onCancel={() => this.setState({ visible: false })}
                saleType="no"
              />
            </Form.Item>
          </>
        }
      >
        {src ? (
          <div>
            <Divider>
              <Typography.Text type="secondary" style={{ fontSize: 12 }}>
                图片导航组件，{full === 'full' ? '两边铺满' : '两边留白'}
              </Typography.Text>
            </Divider>
            <img
              src={src}
              alt={full === 'full' ? '两边铺满' : '两边留白'}
              style={{ width: '100%', padding: full === 'full' ? 0 : '0 15px' }}
            />
          </div>
        ) : (
          <Typography>
            <Text type="secondary">
              这里编辑图片导航
              <Icon type="file-image" theme="twoTone" />
            </Text>
          </Typography>
        )}
      </Popover>
    );
  }
}

export default ImgToSpuComponent;
